<template>
	<view>
		<view class="returnBox">
			<return-text></return-text>
		</view>
		<!-- 加载 -->
		<view v-if="initState" class="loadingbox">
			<van-loading class="loading" size="24px">加载中...</van-loading>
		</view>
		<view v-else class="box">
			<!-- 输入框 -->
			<view class="box_input">
				<view class="box_input_input">
					<input cursor-spacing="10px" type="text" v-model="textValue" @blur="blur" :focus="showInput"
						:placeholder="mess" maxlength="88" />
				</view>
				<!-- 按钮 -->
				<view class="box_input_button">
					<!-- 发送按钮 -->
					<view class="box_input_button_text" @click="sendOut">发送</view>
				</view>
			</view>
			<!-- 文章内容 -->
			<view class="content">
				<!-- 头像昵称 -->
				<view class="content_data">
					<view class="content_data_head" @click="userPage(articleContent.user.userId)">
						<image :src="articleContent.user.avatar" mode=""></image>
						<!-- ID和发布时间 -->
						<view class="content_data_name">
							<view class="content_data_name_id">
								{{articleContent.user.userName}}
							</view>
							<view class="fans">{{articData|formatDate( 'MM月dd日')}}发布</view>
						</view>
					</view>
					<!-- +关注 -->
					<view v-if="objUserId !== articleContent.user.userId">
						<view v-if="articleContent.fansState" class=".user_title_followTwo" @click="userFollow"> 已关注
						</view>
						<view v-else class="user_title_follow" @click="userFollow"> +关注 </view>
					</view>
				</view>

				<!-- 标题 -->
				<view class="content_title">
					{{articleContent.article.title}}
				</view>
				<!-- 内容 -->
				<view class="content_text">
					<text>
						{{articleContent.article.content}}
					</text>
					<view class="content_image" v-for="(item,idx) in aiticImage" :key="idx">
						<image :src="item" mode="widthFix"></image>
					</view>
				</view>
				<!-- 一件三联 -->
				<view class="user-flow">
					<view>
						<!-- 转发 -->
						<view @click="forward">
							<button class="view" open-type="share" type="primary">
								<image src="../../static/message-icon/zhuanfa.jpg"></image>

							</button>
							<text>{{articleContent.article.shareNum}}</text>

						</view>
						<!-- 评论 -->
						<view>
							<image src="../../static/message-icon/xiaoxi.png" mode=""></image>
							<text>{{articleContent.article.commentNum}}</text>
						</view>
						<!-- 点赞 -->
						<view @click="dianzan">
							<image v-if="articleContent.likeStatus" src="../../static/message-icon/dianzan.png" mode="">
							</image>
							<image v-else src="../../static/message-icon/Nolink.png" mode=""></image>

							<text>{{articleContent.article.likeNum}}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 评论区 -->
			<view class="reply">
				<!-- 评论数量 -->
				<view @click="huoqu" class="reply_title">评论（{{articleContent.article.commentNum}}条）</view>
				<view v-if="userCommentsList.length == 0">
					<van-empty description="快来抢沙发吧~" />
				</view>
				<view v-for="(item,idx) in userCommentsList" :key="item.commentId">
					<!-- 主评论 -->
					<view class="reply_data">
						<!-- 左侧头像 -->
						<view class="reply_data_head">
							<image :src="item.avatar"></image>
						</view>
						<!-- 右侧 -->
						<view class="right_box">
							<!-- 右侧 昵称+点赞-->
							<view class="reply_data_id">
								<!-- ID和粉丝数量 -->
								<view class="reply_data_name">
									<view class="reply_data_name_text">
										{{item.name}}
										<view v-if="item.userId == articleContent.user.userId" class="message"> 作者
										</view>
									</view>
								</view>
								<!-- +点赞 -->
								<view class="fabulous" @click="pldianzan(item.commentId,idx,item)">
									<image v-if="item.status" src="../../static/message-icon/dianzan.png"
										mode="widthFix"></image>
									<image v-else src="../../static/message-icon/Nolink.png" mode="widthFix"></image>
									<text>{{item.likeNum}}</text>
								</view>

							</view>
							<!-- 内容 -->
							<view @longtap="onLongPress(item.commentId)"
								@click="replyComments(item.commentId,item.name,idx)">
								<view v-if="item.link == '' " @click="send" class="reply_text">
									{{item.content}}
								</view>
								<view v-else>
									<image :src="item.link" mode="widthFix"></image>
								</view>
								<view class="reply_text_time">
									<text v-if="parseInt((timeatamp-item.createTime)/1000/60)<1"> 刚刚</text>
									<text
										v-if="parseInt((timeatamp-item.createTime)/1000/60)>=1 && parseInt((timeatamp-item.createTime)/1000/60)<60">
										{{ parseInt((timeatamp-item.createTime)/1000/60) }}分钟前回复</text>
									<text
										v-if="parseInt((timeatamp-item.createTime)/1000/60)>=60 && parseInt((timeatamp-item.createTime)/1000/3600)<24">
										{{ parseInt((timeatamp-item.createTime)/1000/3600) }}小时前回复</text>
									<text v-if="parseInt((timeatamp-item.createTime)/1000/3600)>=24">
										{{ parseInt((timeatamp-item.createTime)/1000/3600/24) }}天前回复</text>
									<text v-if="parseInt((timeatamp-item.createTime)/1000/3600/24)>1">
										{{ item.create||formatDate( 'MM月dd日') }}发布</text>
									<text>回复</text>
								</view>
							</view>

						</view>

					</view>

					<view v-if=" item.commentsNum !==0 && !panduan(idx)">
						<!-- 二级评论 -->
						<view class="reply_data data_chi" v-for="(item2,cidx) in cliCommentsListen[idx]"
							:key="item2.commentId">
							<!-- 左侧头像 -->
							<view class="reply_data_head">
								<image :src="item2.avatar"></image>
							</view>
							<!-- 右侧 -->
							<view class="right_box">
								<!-- 右侧 昵称+点赞-->
								<view class="reply_data_id">
									<!-- ID和粉丝数量 -->
									<view class="reply_data_name">
										<view class="">
											{{item2.name}}
										</view>
									</view>
									<!-- +点赞 -->
									<view class="fabulous" @click="pldianzanb(item2.commentId,idx,cidx,item.commentId)">
										<image v-if="item2.status" src="../../static/message-icon/dianzan.png"
											mode="widthFix">
										</image>
										<image v-else src="../../static/message-icon/Nolink.png" mode="widthFix">
										</image>
										<text>{{item2.likeNum}}</text>
									</view>
								</view>
								<!-- 内容 -->
								<view @click="replyCommentsChi(item2.commentId,item2.name,item.idx)"
									@longtap="onLongPress(item2.commentId)" class="reply_text">
									<text>回复</text> <text class="reply_text_over">{{item2.wasRepliedName}}</text>
									<text v-if="item2.link == '' ">
										：{{item2.content}}
									</text>
									<view v-else>
										<image :src="item2.link" mode="widthFix"></image>
									</view>
									<view class="reply_text_time">
										<text v-if="parseInt((timeatamp-item2.createTime)/1000/60)<1"> 刚刚</text>
										<text
											v-if="parseInt((timeatamp-item2.createTime)/1000/60)>=1 && parseInt((timeatamp-item2.createTime)/1000/60)<60">
											{{ parseInt((timeatamp-item2.createTime)/1000/60) }}分钟前回复</text>
										<text
											v-if="parseInt((timeatamp-item2.createTime)/1000/60)>=60 && parseInt((timeatamp-item2.createTime)/1000/3600)<24">
											{{ parseInt((timeatamp-item2.createTime)/1000/3600) }}小时前回复</text>
										<text v-if="parseInt((timeatamp-item2.createTime)/1000/3600)>=24">
											{{ parseInt((timeatamp-item2.createTime)/1000/3600/24) }}天前回复</text>
										<text v-if="parseInt((timeatamp-item2.createTime)/1000/3600/24)>1">
											{{ item.create||formatDate( 'MM月dd日') }}发布</text>
										<text>回复</text>
									</view>
								</view>

							</view>

						</view>
					</view>

					<view
						v-if="item.commentsNum !== 0 && (isfalse[idx]===undefined||isfalse[idx]===null ? true : false)"
						@click="openReplyContent(item.commentId,idx)" class="reply_hidden">
						—— 点击展开{{item.commentsNum}}条评论
						<image src="../../static/message-icon/open.png" mode=""></image>
					</view>


				</view>

				<view class="dibu">
					已全部加载
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		formatDate
	} from '../../data/data.js'
	export default {
		props: {
			id: {
				type: String
			}
		},
		data() {
			return {
				// 是否刚进来
				initState: true,
				// 评论折叠
				activeNames: [],
				// 键盘焦点
				showInput: false,
				// 用户评论
				userCommentsList: [],
				// 用户子评论
				cliCommentsListen: [],
				// 文章信息
				articleContent: {},
				// 图片数组
				aiticImage: [],
				// 评论输入框内容
				textValue: '',
				// 输入框默认文字
				mess: '回复',
				// 评论等级
				isAct: 0,
				// 评论id
				commentId: '',
				// 关注状态
				isFans: '',
				show: true,
				// 主评论点赞数量
				likeNumber: '',
				// 访问当前页面的用户id
				objUserId: '',
				// 文章发布时间
				articData: '',
				// 评论的时间
				replyData: [],
				isfalse: [],
				commentIndex: '',
				// 是否展开状态
				isOpen: [],
				name: '',
				// 页面当前时间戳
				timeatamp: '',
				page:[]
			};
		},
		created() {
			// 拿到用户信息
			try {
				const value = uni.getStorageSync('userObj');
				if (value) {
					this.objUserId = value.userId
				}
			} catch (e) {}
			// 拿到当前时间
			let time = Date.now()
			this.timeatamp = time
			console.log("当前时间戳" + this.timeatamp)
		},
		onLoad() {
			this.queryArticleContent()
			this.commentContent()
		},
		onReachBottom() {
			console.log("下拉触底懒加载")
		},
		filters: {
			formatDate(time, fmt) {
				return formatDate(time, fmt)
			},
		},
		methods: {
			// 获取文章内容
			async queryArticleContent() {
				const {
					data: res
				} = await uni.$http.get(`//ym_server/IntactArticle/details/${this.id}`)
				this.articleContent = res.data.article
				this.aiticImage = this.articleContent.image.imageLink.split(';')
				// 时间
				this.articData = this.articleContent.article.createTime
				setTimeout(() => {
					this.initState = false
				}, 600)
			},

			// 获取一级评论列表
			async commentContent() {
				const {
					data: res
				} = await uni.$http.get(`//ym_server/comment/queryOneComment?articleId=${this.id}&page=1`)
				this.userCommentsList = res.data.list.records
			},

			// 展开评论 点击获取二级评论
			async openReplyContent(itemId, idx) {
				// 传参 主评论id和主评论索引值
				// console.log('当前评论id' + itemId)
				// 声明变量pageNum作为页码
				let pageNum = 0;
				// 判断当前子评论页码是否为空
				if (this.page[idx] != undefined) {
					// 当前子评论页码不为空。则把子评论页码赋给临时变量
					pageNum = this.page[idx]
				}
				// 点击加载下一页
				pageNum++
				// 发送请求
				const {
					data: res
				} = await uni.$http.get(
					`//ym_server/comment/queryTwoComment?articleId=${this.id}&commentId=${itemId}&page=${pageNum}`)
				console.log(res)
				if (res.success == false) {
					uni.showToast({
						title: '网络异常',
						duration: 1000,
						icon: 'none'
					});
				}

				// 判断 如果回传数据当前页码不等于当前页码 current为响应数据当前页码
				if (this.page[idx] != res.data.list.current) {
					//this.cliCommentsListen是保存子评论的数组，idx为当前父评论的索引，两者组合为当前父评论的子评论保存位置
					//如果当前储存二级评论的数组的当前索引位置不为undefined，
					if (this.cliCommentsListen[idx] !== undefined) {
						// 则表示当前位置子评论已展开，所以向其中添加数据：将当前二级评论添加到数组中
						Array.prototype.push.apply(this.cliCommentsListen[idx], res.data.list.records)
					} else {
						//如果为undefined，则表示当前位置评论未展开，直接进行赋值操作
						this.cliCommentsListen[idx] = res.data.list.records
					}
					this.isOpen.push(idx)
					this.page[idx] = res.data.list.current
				}
				// console.log("this.page: " + this.page)
				// console.log(res.data.list.pages)
				if (this.page[idx] == res.data.list.pages) {
					this.isfalse[idx] = false
				}
			},
			panduan(id) {
				//this.isOpen保存当前已展开的父评论索引，传入
				let flag = this.isOpen.indexOf(id)
				return flag == -1
			},
			// 关注
			userFollow() {
				let uid = this.articleContent.user.userId
				var app = this
				if (this.articleContent.fansState == true) {
					uni.showModal({
						title: '提示',
						content: '是否取消关注',
						success: function(res) {
							if (res.confirm) {
								// console.log('用户点击确定');
								uni.$http.post(`//ym_server/fans/addFollow?id=${uid}`).then((res) => {
									app.articleContent.fansState = !app.articleContent.fansState
									// console.log(res.data)
								})
							} else if (res.cancel) {
								// console.log('用户点击取消');
								return
							}
						}
					});

				} else {
					uni.$http.post(`//ym_server/fans/addFollow?id=${uid}`).then((res) => {
						this.articleContent.fansState = !this.articleContent.fansState
						// console.log(res.data)
					})
				}

			},
			// 键盘
			send() {
				this.showInput = true
			},
			// 评论折叠
			onChange(event) {
				// console.log("onChange事件")
				this.activeNames = event.detail
				this.show = !this.show
			},
			// 回复主评论
			replyComments(aid, name, idx) {
				this.commentId = aid
				this.commentIndex = idx
				this.isAct = 1
				this.$nextTick(() => {
					this.showInput = true
					this.mess = `回复:${name}`
				})
			},
			// 回复子主评论
			replyCommentsChi(bid, name) {
				this.commentId = bid
				this.isAct = 1
				this.$nextTick(() => {
					this.showInput = true
					this.mess = `回复:${name}`
				})
			},
			// 发送评论
			sendOut() {
				var text = this.textValue
				// 发送主评论
				if (this.isAct === 0) {
					uni.$http.post('//ym_server/comment', {
						"content": text,
						"parentId": "0",
						"articleId": this.id,
						"link": ""
					}).then((res) => {
						this.textValue = ''
						this.commentContent()
						uni.showToast({
							title: '评论成功',
							duration: 1000
						});
					})
				} else {
					// 发送子评论
					let commentId = this.commentId
					let commentIndex = this.commentIndex
					uni.$http.post('//ym_server/comment', {
						"content": text,
						"parentId": `${this.commentId}`,
						"articleId": this.id,
						"link": ""
					}).then((res) => {
						console.log(res)
						this.textValue = ''
						this.commentContent()
						this.openReplyContent(commentId, commentIndex)
						uni.showToast({
							title: '评论成功',
							duration: 1000
						});
					})
					this.commentId = ''
					this.isAct = 0
				}
			},

			// 长按删除
			onLongPress(e) {
				console.log(e)
				var app = this
				uni.showModal({
					title: '提示',
					content: '是否删除该评论',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.$http.delete(`//ym_server/comment/oneComment/${e}`).then((res) => {
								app.commentContent()
								uni.showToast({
									title: '删除成功',
									// icon: 'none',
									duration: 1000
								});
							})

						} else if (res.cancel) {
							console.log('用户点击取消');
							return
						}
					}
				});
			},
			// 当input失去焦点时
			blur() {
				this.showInput = false
				this.mess = '回复'
			},
			// 文章点赞
			dianzan() {
				uni.$http.post(`/ym_server/article-like/${this.id}`).then((res) => {
					// console.log(res.data)
					this.queryArticleContent()
				})
			},
			// 评论点赞
			async pldianzan(id, idx) {
				const {
					data: res
				} = await uni.$http.put(`/ym_server/comment-like?id=${id}`)
				// this.userCommentsList[idx].likeNum +1;
				this.commentContent()
			},
			// 子评论点赞
			async pldianzanb(id, num, cnum, zid) {
				const {
					data: res
				} = await uni.$http.put(`/ym_server/comment-like?id=${id}`)
				console.log(this.cliCommentsListen[num][cnum])
				if (this.cliCommentsListen[num][cnum].status == true) {
					this.cliCommentsListen[num][cnum].status = false
					this.cliCommentsListen[num][cnum].likeNum - 1
				} else {
					this.cliCommentsListen[num][cnum].status = true
					this.cliCommentsListen[num][cnum].likeNum + 1
				}
			},
			// 转发文章到用户
			onShareAppMessage() {
				return {
					title: "YouMe校园",
					path: `subpkg/community-details/community-details?id=${this.id}`,
					imageUrl: "https://static01.imgkr.com/temp/1b08e2e136c345e585e2ed834aa99426.png"
				}

			},
			// 跳转到用户界面
			userPage(uid) {
				console.log("点击用户")
				uni.navigateTo({
					url: `../user-info/user-info?id=${uid}`
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	html {
		background: #FFFFFF;
	}

	.loadingbox {
		width: 100%;
		display: flex;
		text-align: center;

		.loading {
			margin: 100upx auto;
		}
	}

	.returnBox {
		position: sticky;
		background-color: #ffffff;
		padding-bottom: 40upx;
		z-index: 999;
		top: 0;
		left: 0;
	}

	.replyChildrenTitle {
		display: flex;
		justify-content: flex-end;
	}

	.box_input {
		width: 100%;
		height: 150upx;
		background-color: #EEF2F4;
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: flex-start;
		justify-content: space-evenly;
		z-index: 999;

		.box_input_input {
			border: #3FD3D1 4upx solid;
			border-radius: 50upx;
			background-color: #fff;
			height: 72upx;
			font-size: 28upx;
			flex: 7;
			padding: 0 20upx;
			margin: 30upx 0upx 0 50upx;

			input {
				height: 72upx;
				line-height: 72upx;
			}
		}

		.box_input_button {
			flex: 2;
			text-align: center;
			margin-top: 30upx;

			image {
				width: 72upx;
				height: 72upx;
			}

			.box_input_button_text {
				width: 80upx;
				height: 80upx;
				background-color: #3FD3D1;
				color: #FFFFFF;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 26upx;
				margin-left: 20upx;
			}
		}
	}

	.box {
		background-color: #e8ebed;

		.content {
			background-color: #ffffff;
			padding: 40upx;
			border-top: 20upx #e8ebed solid;

			.content_title {
				font-size: 32upx;
				font-weight: 700;
				margin: 30upx 0 0 0;
			}

			.content_data {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.content_data_head {
					display: flex;

					image {
						width: 80upx;
						height: 80upx;
						border-radius: 50%;
						margin-right: 12upx;
					}
				}

				.content_data_name {
					.content_data_name_id {
						font-size: 32upx;
						font-weight: 500;
					}

					.fans {
						color: #7A7A7A;
						font-size: 24upx;
						font-weight: 400;
					}
				}

				.user_title_follow {
					width: 124upx;
					height: 50upx;
					background-color: #3FD3D1;
					border-radius: 56upx;
					font-size: 28upx;
					color: #ffffff;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.user_title_followTwo {
					width: 124upx;
					height: 50upx;
					background-color: #C0C0C0;
					border-radius: 56upx;
					font-size: 28upx;
					color: #FFFFFF;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			.content_text {
				margin-top: 10upx;
				font-size: 28upx;
				font-weight: 400;
				color: #333333;

				.content_image {
					text-align: center;

					image {
						margin-top: 20rpx;
						border-radius: 30rpx;
						width: 100%;
					}
				}
			}

			.user-flow {
				width: 100%;
				height: 48upx;
				display: flex;
				justify-content: flex-end;
				margin-top: 20upx;

				>view {
					width: 400upx;
					height: 48upx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					view {
						width: 120upx;
						display: flex;
						align-items: center;
						margin-left: 26upx;

						image {
							width: 36upx;
							height: 36upx;
						}

						button::after {
							outline: none;
							border: none;
						}

						text,
						.view {
							color: #7A7A7A;
							font-size: 28upx;
							min-width: 60upx;
							background-color: #FFFFFF;
							margin: auto;
							text-align: center;

							image {
								width: 36upx;
								height: 36upx;
							}
						}

						.view {
							width: 100upx;
							height: 50upx;
						}
					}
				}

			}


		}

		.reply {
			margin-top: 20rpx;
			margin-bottom: 100upx;
			background-color: #ffffff;
			padding: 40upx;

			.reply_title {
				font-size: 30upx;
				font-weight: 500;
				margin: 6upx 0 26upx 0;
			}

			.reply_data {
				display: flex;

				.reply_data_head {
					image {
						width: 70upx;
						height: 70upx;
						border-radius: 50%;
						margin-right: 12px;
						margin-top: 0upx;
						margin-bottom: 10upx;
					}
				}

				.right_box {
					display: flex;
					flex-direction: column;
					width: 86%;
				}

				.reply_data_id {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.reply_data_name {
						font-size: 28upx;

						.reply_data_name_text {
							display: flex;
							align-items: center;
							font-size: 28upx;

							.message {
								width: 68upx;
								height: 32upx;
								line-height: 32upx;
								text-align: center;
								background-color: #3FD3D1;
								color: #fff;
								font-size: 24upx;
								margin-left: 10upx;
								border-radius: 6upx;
							}
						}

						.fans {
							color: #7A7A7A;
							font-size: 20upx;
						}
					}

					.fabulous {
						display: flex;
						align-items: center;

						image {
							width: 32upx;
							height: 32upx;
							margin: auto;
						}

						text {
							margin-left: 10upx;
							color: #7A7A7A;
							font-size: 28upx;
							min-width: 46upx;
						}
					}
				}

				.reply_text {
					margin-top: 20upx;
					width: 100%;
					font-size: 28upx;
					color: #666;

					.reply_text_over {
						color: #3FD3D1;
						padding: 0 10upx;
					}
				}

				.reply_text_time {
					width: 100%;
					margin-bottom: 8upx;
					height: 42upx;
					line-height: 42upx;

					text:nth-child(1) {
						font-size: 28upx;
						color: #ccc;
						margin-right: 20upx;
					}

					text:nth-child(2) {
						font-size: 28upx;
					}
				}


				image {
					width: 80%;
					margin-top: 20rpx;
					border-radius: 30rpx;
				}

			}

			.reply_hidden {
				width: 100%;
				height: 70upx;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				color: #666;
				font-size: 26upx;
				margin-left: 80upx;

				image {
					width: 38upx;
					height: 38upx;
					margin: 0 8upx;
				}
			}

			.data_chi {
				margin-left: 90upx;
			}

			.dibu {
				width: 100%;
				height: 130upx;
				line-height: 130upx;
				text-align: center;
				font-size: 28upx;
				color: #CCCCCC;
			}
		}

	}
</style>
